<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建表格</title>

<style type="text/css">
	/* 为表格定义CSS样式 */
	body{padding-left:15px;font-size:20px;}
	table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; }
	table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; }
	input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;}
	input[type='button']{font-size:20px;}
</style>

<!-- 引入jquery函数库文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/** 练习1：创建单行单列的表格 */
	function createTable1(){
		// 1、创建一个table
		var table = $("<table></table>");
		
		// 2、创建一个tr
		var tr = $("<tr></tr>");
		
		// 3、创建一个td
		var td = $("<td>单行单列表格</td>");
		
		// 4、将td添加到tr中
		tr.append(td);
		
		// 5、将tr添加到table中
		table.append(tr);
		
		// 6、将table添加到body中
		$("body").append(table);
		
		$("body").append("<table><tr><td>这是一个表格</td></tr></table>")
		$("body").append($("<table></table>").append($("<tr></tr>").append($("<td>第一行一低劣</td>"))));
	}

	/** 练习2：创建5行6列的表格 */
	function createTable2(){
		var table = $("<table></table>");
		for (var i = 0; i < 5; i++) {
			var tr = $("<tr></tr>");
			for (var j = 0; j < 6; j++) {
				var cell = (i + 1) + " * " + (j + 1) + " = " + ((i + 1) * (j + 1));
				var td = $("<td>" + cell + "</td>");
				tr.append(td);
			}
			table.append(tr);
		}
		$("body").append(table);
	}

	/** 练习3：创建指定行和列的表格 */
	function createTable3(){
		var row = $("#rows").val() == "" ? 1 : parseInt($("#rows").val());
		var col = $("#cols").val() == "" ? 1 : parseInt($("#cols").val());
		var table = $("<table></table>");
		for (var i = 0; i < row; i++) {
			var tr = $("<tr></tr>");
			for (var j = 0; j < col; j++) {
				var cell = (i + 1) + " * " + (j + 1) + " = " + ((i + 1) * (j + 1));
				var td = $("<td>" + cell + "</td>");
				tr.append(td);
			}
			table.append(tr);
		}
		$("body").append(table);
	}
</script>
</head>
<body>
	<!-- 练习1：点击下列按钮创建单行单列表格 -->
	<input type="button" value="创建单行单列表格" onclick="createTable1()" /><br/><br/>

	<!-- 练习2：点击下列按钮创建5行6列表格 -->
	<input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br/><br/>

	<!-- 练习3：点击下列按钮创建指定行、指定列的表格 -->
	<input type="button" value="创建表格（输入行数和列数）" onclick="createTable3()" /><br/>
	行数：<input type="text" id="rows"/><br/>
	列数：<input type="text" id="cols"/><br/><br/>

	<!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
	
	
	
</body>
</html>
